<template>
  <div class="payManageDetail">
    <!-- 已审批过的数据可以进行批量支付 -->
    <div class="tool">
      <el-form
        ref="form"
        :inline="true"
        :model="formInline"
        class="form-inline"
        :label-width="'80px'"
        @submit.native.prevent
      >
        <el-form-item label="运单号">
          <el-input v-model="formInline.yund_id" placeholder="输入运单号"></el-input>
        </el-form-item>
        <el-form-item label="车牌号">
          <el-input v-model="formInline.car_number" placeholder="输入车牌号"></el-input>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select v-model="formInline.status" placeholder="选择支付状态" @change="initial">
            <el-option label="全部" value="0"></el-option>
            <el-option label="未支付" value="1"></el-option>
            <el-option label="已支付" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 40px;">
          <el-button @click="resetTable">重置</el-button>
          <el-button class="btn" type="primary" @click="initial" native-type="submit">查询</el-button>
        </el-form-item>
      </el-form>
      <div class="right">
        <el-button type="success" @click="batchPay" v-if="form.status == 1">批量后台支付</el-button>
        <el-button type="danger" @click="batchCancle" v-if="form.status == 0">批量撤销</el-button>
      </div>
    </div>
    <div class="main">
      <el-table
        :data="tableList"
        style="width: 100%"
        v-loading="tableloading"
        @selection-change="handleSelectionChange"
        border
        ref="multipleTable"
      >
        <el-table-column align="center" width="80">
          <template slot-scope="scope">
            <StatusTag
              v-if="scope.row.is_lock == 1"
              :isError="true"
              :status="5"
              :lockReason="scope.row.reason"
              :yund_id="scope.row.yund_id"
            />
          </template>
        </el-table-column>
        <el-table-column type="selection" width="25" align="center" :selectable="selectableStatus"></el-table-column>
        <el-table-column
          prop="area_company"
          label="所属地区"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop label="运单ID" width="110" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span>{{ scope.row.add_id + '-' + scope.row.yund_id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="company_name"
          label="公司名称"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="goods" label="货物名称" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column
          prop="cph"
          label="车牌号"
          width="100"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column prop="driver_name" label="司机姓名" width="100" align="center">
          <template slot-scope="scope">{{ $maskString(scope.row.driver_name) }}</template>
        </el-table-column>
        <el-table-column prop="th_time" label="发货时间" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="color: #409EFF;">{{ scope.row.th_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="到达时间" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="color: #67C23A;">{{ scope.row.dd_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="dd_time" label="审核时间" align="center" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <span style="color: #F56C6C;">{{ scope.row.add_time }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="to_address" label="到达地" align="center" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="shkg" label="收货重量" align="center" width="80"></el-table-column>
        <el-table-column prop="yfdj" label="运费单价" align="center" width="80"></el-table-column>
        <el-table-column prop="yfdj" label="含税金额" align="center" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.money_bill }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="zyf" label="实结金额" align="center" width="100"></el-table-column>
        <el-table-column prop="oil_money" label="油气(元)" align="center" width="80"></el-table-column>
        <el-table-column prop="oil_money" label="审核状态" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.xiugai == 0" style="color:red">未审核</span>
            <span v-else-if="scope.row.xiugai == 1" style="color:green">已审核</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="支付状态" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 0" style="color:red">未支付</span>
            <span v-else-if="scope.row.status == 1" style="color:green">已支付</span>
            <span v-else-if="scope.row.status == 2" style="color:blue">二次支付</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="status" label="钉钉状态" align="center" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.batch_number_ding == '0'" style="color:red">未发起</span>
            <span v-if="scope.row.batch_number_ding != '0'" style="color:green">已发起</span>
          </template>
        </el-table-column>-->
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="padding-left: 6px;padding-right: 6px;"
              @click="showPaymentBillDetail(scope.row)"
            >{{scope.row.status == 1 ? '查看' : '支付'}}</el-button>

            <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" class="in-page-dropdown">
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  style="padding-left: 6px;padding-right: 6px;"
                  @click="syncPayInfo(scope.row.yund_id)"
                >上传资金流水</el-button>
              </el-dropdown-item>
              <el-dropdown-item>
                <el-button
                  size="mini"
                  type="primary"
                  style="padding-left: 6px;padding-right: 6px;"
                  @click="upWaybill(scope.row)"
                >上传运单</el-button>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      top="5vh"
      class="dialog processDialog"
      title="查看财务审核信息"
      :close-on-click-modal="false"
      :visible.sync="dialogVisibleAuditing"
      append-to-body
      width="80%"
    >
      <dingProcessAndpay
        v-if="dialogVisibleAuditing"
        :billDetail="billDetail"
        @closeDialog="closePayDialog"
      />
    </el-dialog>
    <el-dialog
      top="5vh"
      class="dialog"
      title="批量后台支付"
      :close-on-click-modal="false"
      :visible.sync="dialogBatchPay"
      append-to-body
      width="50%"
    >
      <catchPayDialog
        v-if="dialogBatchPay"
        :batchPayIds="batchPayIds"
        @closeDialog="closePayDialog"
        @errorClose="dialogBatchPay=false"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  getBatchDingListDetail,
  paymentBillDetail,
  revokeSingleApproval,
  uploadPay,
  uploadBill,
} from "@/api/moneyManagment";
import dingProcessAndpay from "./dingProcessAndpay";
import catchPayDialog from "./catchPayDialog";
import { validateAndCacheCardInfo } from "@/api/pageConfig";
export default {
  name: "payManageDetail",
  components: {
    dingProcessAndpay,
    catchPayDialog
  },
  props: {
    form: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      tableloading: false,
      tableList: [],
      billDetail: {},
      dialogVisibleAuditing: false,
      multipleSelection: [], //el-table select选中的数据
      batchPayIds: null, //batchPayDialog需要的以逗号分隔的ids数据
      dialogBatchPay: false,
      formInline: {
        car_number: "",
        yund_id: "", //运单号
        status: "0" //1未支付2已支付
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {
      let batch_number = this.form.batch_number;
      this.tableloading = true;
      let result = await getBatchDingListDetail({
        batch_number,
        ...this.formInline
      });
      this.tableloading = false;
      if (result.code == 200) {
        this.tableList = result.data.list;
      }
    },

    resetTable() {
      this.filterapply_time = "";
      this.formInline = {
        car_number: "",
        yund_id: "", //运单号
        status: "0" //1未支付2已支付
      };
      this.initial();
    },
    //钉钉批次号为0的时候可选
    selectableStatus(row, index) {
      if (row.is_lock == 1) {
        return false;
      } else {
        if (this.form.status == 1) {
          // 已审批状态下 已审核 未支付的才可进行选中
          if (row.xiugai == 1 && row.status == 0) {
            return true;
          } else {
            return false;
          }
        } else {
          //未审批状态下
          return true;
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    async showPaymentBillDetail(item) {
      let result = await paymentBillDetail({
        id: item.id
      });
      if (result.code == 200) {
        this.billDetail = result.data;
        //添加钉钉审批标识
        this.billDetail = {
          ...this.billDetail,
          ddAprove: this.form.status == 1
        };
        this.dialogVisibleAuditing = true;
      }
    },
    closePayDialog() {
      this.dialogVisibleAuditing = false;
      this.dialogBatchPay = false;
      this.initial();
    },
    //批量撤销
    async batchCancle() {
      //批量修改运单状态
      let length = this.multipleSelection.length;
      if (length == 0) {
        this.$message.error("请先选中要撤销的数据!");
        return;
      } else {
        this.$confirm("确定要批量撤销吗？", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(async () => {
            let yund_ids = this.multipleSelection
              .map(item => item.yund_id)
              .join(",");
            let result = await revokeSingleApproval({
              batch_number: this.form.batch_number,
              yund_id: yund_ids
            });
            if (result.code == 200) {
              this.$message.success("批量撤销成功!");
              if (this.multipleSelection.length == this.tableList.length) {
                //全部撤销 该运单数据已不存在
                setTimeout(() => {
                  this.$emit("closeDialog");
                }, 500);
              } else {
                //部分撤销 刷新当前页面
                this.initial();
              }
            }
          })
          .catch(e => {});
      }
    },
    //批量支付
    async batchPay() {
      //批量修改运单状态
      let length = this.multipleSelection.length;
      if (length == 0) {
        this.$message.error("请先选中要支付的数据!");
        return;
      } else if (length > 1) {
        let companyName = this.multipleSelection[0].company_name;
        let companyNameEvery = this.multipleSelection.every(item => {
          return item.company_name == companyName;
        });
        if (!companyNameEvery) {
          this.$message.error("只能选中同一家公司数据!");
          return;
        }
      }

      if (length > 100) {
        this.$message.error("批量支付单次最多选择100条!");
        return;
      }

      if (
        !this.multipleSelection.every(item => {
          return item.status == 0 && item.xiugai == 1 && item.area == 0;
        })
      ) {
        this.$message.error("选中数据不符合要求!");
        return;
      }

      //校验银行卡号
      //验证卡号
      const cardLoading = this.$loading({
        lock: true,
        text: "验证银行卡号中...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.5)",
        customClass: "loadingCss"
      });

      this.wrongCardList = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        let item = this.multipleSelection[i];
        let card = item.bank;
        let result = await validateAndCacheCardInfo(card);
        if (!result.validated) {
          //验证失败
          this.wrongCardList.push(item);
          break;
        }
      }
      cardLoading.close();
      if (this.wrongCardList.length > 0) {
        //存在验证失败的卡号 结束支付并提示
        this.$message.error(`银行卡号验证失败,请重新选择!`);
        this.wrongCardDialog = true;
        return;
      }

      this.batchPayIds = this.multipleSelection.reduce((prev, curr, index) => {
        return (
          prev +
          curr.id +
          (index == this.multipleSelection.length - 1 ? "" : ",")
        );
      }, "");

      this.dialogBatchPay = true;
    },
    syncPayInfo(yund_id) {
      this.$confirm("确定要同步平台支付信息吗？", "同步平台支付信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await uploadPay({
            yund_id
          });
          if (res.code == 200) {
            this.$message.success(res.msg);
          }
        })
        .catch(() => {});
    },
    upWaybill(row) {
      this.$confirm("确定要重新上传运单吗？", "运单上传", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let res = await uploadBill({
            yund_id: row.yund_id,
            id: row.id
          });
          if (res.code == 200) {
            this.$message.success(res.msg);
          }
        })
        .catch(() => {});
    },
  }
};
</script>

<style lang="scss" scoped>
.payManageDetail {
  .tool {
    // text-align: right;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    .el-form {
      display: inline-block;
    }
    .right {
      display: inline-block;
      width: 30%;
      text-align: right;
    }
  }
}
.processDialog {
  ::v-deep .el-dialog {
    height: 88vh;

    .el-dialog__body {
      height: calc(88vh - 55px);
      overflow: hidden;
      padding: 10px;
    }
    .el-form-item {
      margin-bottom: 15px;
    }
  }
}
</style>
